<template>
	<view class="login-container">
		<uni-icons class="icon" type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
		<button class="btn" type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo">一键登录</button>
		<text class="tips">登录尽享更多权益</text>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	export default {
		computed:{
			...mapState('my_user',['targetInfo'])
		},
		data() {
			return {

			};
		},
		methods: {
			...mapMutations('my_user',['saveToken','saveUserInfo','saveTargetInfo']),
			// 一键登录
			async getUserInfo(e) {
				if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权！')
				// 保存用户信息
				this.saveUserInfo(e.detail.userInfo)
				// 获取token需要5个参数  code(登录凭证),encryptedData(完整用户信息密文),iv(加密算法初始量),rawData(用户信息原始数据字符串),signature(使用sha1得到字符串)
				// 获取code    uni.login
				const [err, res] = await uni.login()
				// console.log(res[1].code)
				if (err || res.errMsg !== 'login:ok') return uni.$showError('登录失败！')
				// 准备获取token的参数
				const query = {
					code: res.code,
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv,
					rawData: e.detail.rawData,
					signature: e.detail.signature
				}
				// console.log(query)
				// 发起请求获取token
				const result = await uni.$http.post('/api/public/v1/users/wxlogin', query)
				// 由于没有给我们配置接口权限 在这里弄个假的token
				uni.$showMsg('登录成功')
				const token = '这是一个假的token'
				this.saveToken(token)
				// 判断是否是从购物车支付跳转过来
				if(this.targetInfo.type==='pay') {
					uni.switchTab({
						url:'/pages/cart/cart',
						complete:()=> {
							this.saveTargetInfo({})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.login-container {
		// 登录盒子的样式
		height: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f8f8f8;
		position: relative;
		overflow: hidden;

		// 绘制登录盒子底部的半椭圆造型
		&::after {
			content: ' ';
			display: block;
			position: absolute;
			width: 100%;
			height: 40px;
			left: 0;
			bottom: 0;
			background-color: white;
			border-radius: 100%;
			transform: translateY(50%);
		}

		.icon {}

		.btn {
			width: 90%;
			border-radius: 100px;
			margin: 15px 0;
			background-color: #c00000;
		}

		.tips {
			font-size: 12px;
			color: gray;
		}
	}
</style>
